React Suspense ๋ฐ Error Boundaries: ๋กœ๋”ฉ ๋ฐ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ์— ๋Œ€ํ•œ ์ข…ํ•ฉ ๊ฐ€์ด๋“œ | MLOG | MLOG

์ด ์˜ˆ์ œ์—์„œ:

๊ณ ๊ธ‰ ์ „๋žต ๋ฐ ๋ชจ๋ฒ” ์‚ฌ๋ก€

1. ์„ธ๋ถ„ํ™”๋œ Error Boundaries

์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋‹จ์ผ Error Boundary๋กœ ๋ž˜ํ•‘ํ•˜๋Š” ๋Œ€์‹  ๋” ์ž‘๊ณ  ์„ธ๋ถ„ํ™”๋œ Error Boundaries๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋‹จ์ผ ์˜ค๋ฅ˜๋กœ ์ธํ•ด ์ „์ฒด UI๊ฐ€ ์ถฉ๋Œํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ณ  ์˜ค๋ฅ˜๋ฅผ ๋ณด๋‹ค ํšจ๊ณผ์ ์œผ๋กœ ๊ฒฉ๋ฆฌํ•˜๊ณ  ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ชฉ๋ก์˜ ๊ฐœ๋ณ„ ๋ชฉ๋ก ํ•ญ๋ชฉ์„ ๋ž˜ํ•‘ํ•˜์—ฌ ํ•˜๋‚˜์˜ ์‹คํŒจ ํ•ญ๋ชฉ์ด ์ „์ฒด ๋ชฉ๋ก์„ ๊นจ์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

2. ์‚ฌ์šฉ์ž ์ •์˜ ์˜ค๋ฅ˜ ๋Œ€์ฒด

์ผ๋ฐ˜ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋Œ€์‹  ํŠน์ • ์ปดํฌ๋„ŒํŠธ ๋ฐ ์˜ค๋ฅ˜์— ๋งž๊ฒŒ ์กฐ์ •๋œ ์‚ฌ์šฉ์ž ์ •์˜ ์˜ค๋ฅ˜ ๋Œ€์ฒด ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์œ ์šฉํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๊ฑฐ๋‚˜ ๋Œ€์ฒด ์ž‘์—…์„ ์ œ์•ˆํ•˜๊ฑฐ๋‚˜ ์˜ค๋ฅ˜์—์„œ ๋ณต๊ตฌ๋ฅผ ์‹œ๋„ํ•˜๋Š” ๊ฒƒ์ด ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋งต ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋กœ๋“œ์— ์‹คํŒจํ•˜๋ฉด ์‚ฌ์šฉ์ž์˜ ์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ์„ ํ™•์ธํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๋งต ์ œ๊ณต์—…์ฒด๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๋ผ๊ณ  ์ œ์•ˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ์˜ค๋ฅ˜ ๊ธฐ๋ก

Error Boundaries์—์„œ ํฌ์ฐฉํ•œ ์˜ค๋ฅ˜๋Š” ํ•ญ์ƒ ์˜ค๋ฅ˜ ๋ณด๊ณ  ์„œ๋น„์Šค(์˜ˆ: Sentry, Bugsnag, Rollbar)์— ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์˜ค๋ฅ˜๋ฅผ ์ถ”์ ํ•˜๊ณ  ํŒจํ„ด์„ ์‹๋ณ„ํ•˜๋ฉฐ ๋” ๋งŽ์€ ์‚ฌ์šฉ์ž์—๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ธฐ ์ „์— ๋ฌธ์ œ๋ฅผ ์‚ฌ์ „์— ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅ˜ ๋กœ๊ทธ์— ์‚ฌ์šฉ์ž ์ปจํ…์ŠคํŠธ(์˜ˆ: ์‚ฌ์šฉ์ž ID, ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „, ์œ„์น˜)๋ฅผ ํฌํ•จํ•˜์—ฌ ๋””๋ฒ„๊น…์„ ์ง€์›ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

4. ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง(SSR) ๊ณ ๋ ค ์‚ฌํ•ญ

์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง๊ณผ ํ•จ๊ป˜ Suspense ๋ฐ Error Boundaries๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ Suspense๋Š” ์•„์ง SSR์„ ์™„์ „ํžˆ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜์‹ญ์‹œ์˜ค. ๊ทธ๋Ÿฌ๋‚˜ loadable-components ๋˜๋Š” React 18 ์ŠคํŠธ๋ฆฌ๋ฐ SSR๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ ์‚ฌํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Error Boundaries๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ๋ฐ ์„œ๋ฒ„ ์ธก ํ™˜๊ฒฝ ๋ชจ๋‘์—์„œ ์ผ๊ด€๋˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

5. ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ์ „๋žต

Suspense์™€ ์ž˜ ํ†ตํ•ฉ๋˜๋Š” ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ ํƒํ•˜์‹ญ์‹œ์˜ค. ์ธ๊ธฐ ์žˆ๋Š” ์˜ต์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Suspense๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฐ ๋กœ๋”ฉ ์ƒํƒœ๋ฅผ ์„ ์–ธ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋” ๊น”๋”ํ•˜๊ณ  ์œ ์ง€ ๊ด€๋ฆฌํ•˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

6. Suspense ๋ฐ Error Boundaries ํ…Œ์ŠคํŠธ

๋กœ๋”ฉ ์ƒํƒœ ๋ฐ ์˜ค๋ฅ˜๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด Suspense ๋ฐ Error Boundary ๊ตฌํ˜„์„ ์ฒ ์ €ํžˆ ํ…Œ์ŠคํŠธํ•ฉ๋‹ˆ๋‹ค. Jest ๋ฐ React Testing Library์™€ ๊ฐ™์€ ํ…Œ์ŠคํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ๋”ฉ ์ง€์—ฐ, ๋„คํŠธ์›Œํฌ ์˜ค๋ฅ˜ ๋ฐ ์ปดํฌ๋„ŒํŠธ ์˜ค๋ฅ˜๋ฅผ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค.

7. ์ ‘๊ทผ์„ฑ ๊ณ ๋ ค ์‚ฌํ•ญ

๋กœ๋”ฉ ํ‘œ์‹œ๊ธฐ ๋ฐ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๊ฐ€ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ ์˜ค๋ฅ˜ ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•˜๊ณ  ๊ฐ„๊ฒฐํ•œ ํ…์ŠคํŠธ ๋Œ€์•ˆ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ARIA ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ๋”ฉ ์ƒํƒœ ๋ฐ ์˜ค๋ฅ˜ ์กฐ๊ฑด์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์‹ค์ œ ์˜ˆ์ œ ๋ฐ ์‚ฌ์šฉ ์‚ฌ๋ก€

1. ์ „์ž ์ƒ๊ฑฐ๋ž˜ ํ”Œ๋žซํผ

์ „์ž ์ƒ๊ฑฐ๋ž˜ ํ”Œ๋žซํผ์€ Suspense๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ œํ’ˆ ์„ธ๋ถ€ ์ •๋ณด, ์ด๋ฏธ์ง€ ๋ฐ ๋ฆฌ๋ทฐ๋ฅผ ์ง€์—ฐ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Error Boundaries๋Š” ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, ์ด๋ฏธ์ง€ ๋กœ๋”ฉ ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง๊ณผ ๊ด€๋ จ๋œ ์˜ค๋ฅ˜๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์ œํ’ˆ ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ์— ์‹คํŒจํ•˜๋ฉด Error Boundary๋Š” ์ž๋ฆฌ ํ‘œ์‹œ์ž ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ์˜ค๋ฅ˜๋ฅผ ๊ธฐ๋กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2. ์†Œ์…œ ๋ฏธ๋””์–ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜

์†Œ์…œ ๋ฏธ๋””์–ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ Suspense๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ํ”„๋กœํ•„, ๋‰ด์Šค ํ”ผ๋“œ ๋ฐ ๋Œ“๊ธ€์„ ์ง€์—ฐ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Error Boundaries๋Š” API ์š”์ฒญ, ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง๊ณผ ๊ด€๋ จ๋œ ์˜ค๋ฅ˜๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ํ”„๋กœํ•„์ด ๋กœ๋“œ์— ์‹คํŒจํ•˜๋ฉด Error Boundary๋Š” ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž ์•„์ด์ฝ˜๊ณผ ํ”„๋กœํ•„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋Œ€์‹œ๋ณด๋“œ

๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋Œ€์‹œ๋ณด๋“œ๋Š” Suspense๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฐจํŠธ, ๊ทธ๋ž˜ํ”„ ๋ฐ ํ…Œ์ด๋ธ”์„ ์ง€์—ฐ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Error Boundaries๋Š” ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ, ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง๊ณผ ๊ด€๋ จ๋œ ์˜ค๋ฅ˜๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ ํšจํ•˜์ง€ ์•Š์€ ๋ฐ์ดํ„ฐ๋กœ ์ธํ•ด ์ฐจํŠธ๊ฐ€ ๋ Œ๋”๋ง๋˜์ง€ ๋ชปํ•˜๋ฉด Error Boundary๋Š” ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•˜๊ณ  ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ํ™•์ธํ•˜๋ผ๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

4. ๊ตญ์ œํ™”(i18n)

์„œ๋กœ ๋‹ค๋ฅธ ์–ธ์–ด ๋ฐ ๋กœ์ผ€์ผ์„ ์ฒ˜๋ฆฌํ•  ๋•Œ Suspense๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์–ธ์–ด๋ณ„ ๋ฆฌ์†Œ์Šค๋ฅผ ์ง€์—ฐ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฒˆ์—ญ ํŒŒ์ผ์ด ๋กœ๋“œ์— ์‹คํŒจํ•˜๋ฉด Error Boundary๋Š” ๊ธฐ๋ณธ ์–ธ์–ด ๋ฌธ์ž์—ด ๋˜๋Š” ๋ฒˆ์—ญ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ๊ฐ€ ์–ธ์–ด์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๋„๋ก ์„ค๊ณ„ํ•˜๊ฑฐ๋‚˜ ์ง€์—ญํ™”๋œ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ธ€๋กœ๋ฒŒ ๊ด€์ : ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž ์ปจํ…์ŠคํŠธ์— ์ ์‘

๊ธ€๋กœ๋ฒŒ ๋Œ€์ƒ์„ ์œ„ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ๋•Œ๋Š” ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž ์ปจํ…์ŠคํŠธ์™€ ์ž ์žฌ์ ์ธ ์‹คํŒจ ์ง€์ ์„ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด:

๊ฒฐ๋ก 

React Suspense ๋ฐ Error Boundaries๋Š” ํƒ„๋ ฅ์ ์ด๊ณ  ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ํ•„์ˆ˜์ ์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์˜ ์ž‘๋™ ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๊ณ  ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๋”ฐ๋ฅด๋ฉด ๋กœ๋”ฉ ์ƒํƒœ ๋ฐ ์˜ค๋ฅ˜๋ฅผ ์ •์ƒ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ์›ํ™œํ•œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ€์ด๋“œ๋Š” Suspense ๋ฐ Error Boundaries๋ฅผ ํ”„๋กœ์ ํŠธ์— ํšจ๊ณผ์ ์œผ๋กœ ํ†ตํ•ฉํ•˜์—ฌ ์ „ ์„ธ๊ณ„ ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ๋” ๋ถ€๋“œ๋Ÿฝ๊ณ  ์•ˆ์ •์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋ณด์žฅํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์ง€์‹์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.